﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/chart/chart.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/moment.min.js"></script>
<script src="__STATIC__/vendors/js/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript">
	//single date
	$('#daterange').daterangepicker({
		startDate: moment().add(-1,'month'),//表示开始时间为今天的基础上减1月
		autoApply: true,
		locale: {
			format:'YYYY/MM/DD',
		},
		ranges: {
            '本周': [moment().startOf('week'), moment().endOf('week')],
            '本月': [moment().startOf('month'), moment().endOf('month')]
        },
        startDate: moment().startOf('month'),
        endDate: moment().endOf('month')
	});

	function drawChart(){
		var daterange = $("#daterange").val();
		$.ajax({
		    url: "{:url('showroom/analysisJson')}?daterange=" + daterange,
		    method: "GET",
		    dataType : 'JSON',
		    success: function(data) {
		    	//将json解析成js对象
		      	// var data = JSON.parse(data);

		      	//展厅客流总计数据显示

		      	$('#visitor_count').text(data.VistorCount.thisCount);
		      	$('#new_visitor_count').text(data.VistorCount.thisNewVisitorCount);
		      	$('#visitorChainRatio_text').text(data.VistorCount.visitorChainRatio);

		      	// -------------------------------
		      	//销售顾问接待情况图

		      	var sales_data = data.salesData;

		      	//姓名标签
	      		var sales_label = [];
	      		//客流
		      	var this_sales_data = [];
		      	var last_sales_data = [];

		      	for(var i in sales_data){
			        sales_label.push(sales_data[i].name);

			        this_sales_data.push(sales_data[i].this);
			        last_sales_data.push(sales_data[i].last);
			    }
			    console.log(sales_label);

			    var SalesData_config = {
			        type: "bar",
			        data: {
			            labels: sales_label,
			            datasets: [{
			                label: "本周期",
			                data: this_sales_data,
			                borderColor: "#fff",
			                backgroundColor: "rgba(93, 83, 134, 0.85)",
			                hoverBackgroundColor: "#5d5386"
			            }, {
			                label: "上周期",
			                data: last_sales_data,
			                borderColor: "#fff",
			                backgroundColor: "#e4e8f0",
			                hoverBackgroundColor: "#dde1e9"
			            }]
			        },
			        options: {
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                xAxes: [{
			                    stacked: false,
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }],
			                yAxes: [{
			                    stacked: false,
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true,
			                        stepSize: 1
			                    }
			                }]
			            },
			            aspectRatio: 4,
			            maintainAspectRatio:false
			        }
			    };

			    $('#SalesData_canvas').remove(); // this is my <canvas> element
				$('#SalesData_chart').append('<canvas id="SalesData_canvas" height="100"></canvas>');

			    var a = document.getElementById("SalesData_canvas").getContext("2d");
			    var SalesData = new Chart(a,SalesData_config);
		      	

		      	// -------------------------------
		      	//客流趋势线图

		      	var line_data = data.lineData;

		      	//日期标签
	      		var label = [];
	      		//总客流
		      	var thisVisitorData = [];
		      	var lastVisitorData = [];
		      	//首次客流
		      	var thisFirstVisitorData = [];
		      	var lastFirstVisitorData = [];
		      	//再次客流
		      	var thisLastVisitorData = [];
		      	var lastLastVisitorData = [];

		     	for(var i in line_data){
			        label.push(line_data[i].datetag);

			        thisVisitorData.push(line_data[i].thisVisitorData);
			        lastVisitorData.push(line_data[i].lastVisitorData);

			        thisFirstVisitorData.push(line_data[i].thisFirstVisitorData);
			        lastFirstVisitorData.push(line_data[i].lastFirstVisitorData);

			        thisLastVisitorData.push(line_data[i].thisLastVisitorData);
			        lastLastVisitorData.push(line_data[i].lastLastVisitorData);
			    }

			    // -------------------------------
		      	//展厅总客流数据

			    var VisitorData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisVisitorData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastVisitorData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            aspectRatio: 4,
			            maintainAspectRatio:false
			        }
			    };

			    $('#showroom_total_visitor_canvas').remove(); // this is my <canvas> element
				$('#showroom_total_visitor_chart').append('<canvas id="showroom_total_visitor_canvas" height="100"></canvas>');

			    var a = document.getElementById("showroom_total_visitor_canvas").getContext("2d");
			    var line_chart = new Chart(a,VisitorData_conifg);


			    // -------------------------------
		      	//展厅首次客流数据

			    var firstVisitorData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisFirstVisitorData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastFirstVisitorData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            },
			            aspectRatio: 4,
			            maintainAspectRatio:false
			        }
			    };

			    $('#showroom_First_visitor_canvas').remove(); // this is my <canvas> element
				$('#showroom_First_visitor_chart').append('<canvas id="showroom_First_visitor_canvas" height="100"></canvas>');

			    var a = document.getElementById("showroom_First_visitor_canvas").getContext("2d");
			    var line_chart = new Chart(a,firstVisitorData_conifg);

			    // -------------------------------
		      	//展厅再次客流数据

			    var lastVisitorData_conifg = {
			        type: "line",
			        data: {
			            labels: label,
			            datasets: [{
			                label: "本周期",
			                borderColor: "#e76c90",
			                pointBackgroundColor: "#e76c90",
			                pointHoverBorderColor: "#e76c90",
			                pointHoverBackgroundColor: "#e76c90",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: thisLastVisitorData
			            }, {
			                label: "上周期",
			                borderColor: "#5d5386",
			                pointBackgroundColor: "#5d5386",
			                pointHoverBorderColor: "#342868",
			                pointHoverBackgroundColor: "#342868",
			                pointBorderColor: "#fff",
			                pointBorderWidth: 3,
			                pointRadius: 6,
			                fill: true,
			                backgroundColor: "transparent",
			                borderWidth: 3,
			                data: lastLastVisitorData
			            }]
			        },
			        options: {
			        	//标题
			        	title: { 
					        display: false,
					        text: '访问统计',
					        fontColor: "#f00"
					    },
					    //是否显示图例
			            legend: {
			                display: true
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: false,
			                yPadding: 10
			            },
			            scales: {
			                yAxes: [{
			                    ticks: {
			                        display: true,
			                        stepSize: 1,
			                        beginAtZero: true
			                    },
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    }
			                }],
			                xAxes: [{
			                    gridLines: {
			                        drawBorder: true,
			                        display: true
			                    },
			                    ticks: {
			                        display: true
			                    }
			                }]
			            }
			        }
			    };

			    $('#showroom_Last_visitor_canvas').remove(); // this is my <canvas> element
				$('#showroom_Last_visitor_chart').append('<canvas id="showroom_Last_visitor_canvas" height="100"></canvas>');

			    var a = document.getElementById("showroom_Last_visitor_canvas").getContext("2d");
			    var line_chart = new Chart(a,lastVisitorData_conifg);


			    // -------------------------------
		      	//客流来源占比

		      	var sourcesRatio_data = data.sourcesRatio;

		        var sourcesRatio_config = {
			        type: "pie",
			        data: {
			            labels: sourcesRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: sourcesRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#sourcesRatio_canvas').remove(); // this is my <canvas> element
				$('#sourcesRatio_chart').append('<canvas id="sourcesRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("sourcesRatio_canvas").getContext("2d");
			    var sourcesRatioChart = new Chart(a, sourcesRatio_config);


			    // -------------------------------
		      	//信息来源占比

		      	var originRatio_data = data.originRatio;

		        var originRatio_config = {
			        type: "pie",
			        data: {
			            labels: originRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
			                borderColor: ["#fff", "#fff", "#fff","#fff", "#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff","#fff", "#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: originRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#originRatio_canvas').remove(); // this is my <canvas> element
				$('#originRatio_chart').append('<canvas id="originRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("originRatio_canvas").getContext("2d");
			    var originRatioChart = new Chart(a, originRatio_config);

			    // -------------------------------
		      	//接待时长占比

		      	var lengthRatio_data = data.lengthRatio;

		        var lengthRatio_config = {
			        type: "pie",
			        data: {
			            labels: lengthRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: lengthRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#lengthRatio_canvas').remove(); // this is my <canvas> element
				$('#lengthRatio_chart').append('<canvas id="lengthRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("lengthRatio_canvas").getContext("2d");
			    var lengthRatioChart = new Chart(a, lengthRatio_config);

			    // -------------------------------
		      	//关注车型占比

		      	var vehicleRatio_data = data.vehicleRatio;

		        var vehicleRatio_config = {
			        type: "pie",
			        data: {
			            labels: vehicleRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
			                borderColor: ["#fff", "#fff", "#fff","#fff", "#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff","#fff", "#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: vehicleRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#vehicleRatio_canvas').remove(); // this is my <canvas> element
				$('#vehicleRatio_chart').append('<canvas id="vehicleRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("vehicleRatio_canvas").getContext("2d");
			    var vehicleRatioChart = new Chart(a, vehicleRatio_config);

			     // -------------------------------
		      	//客户性别占比

		      	var sexRatio_data = data.sexRatio;

		        var sexRatio_config = {
			        type: "pie",
			        data: {
			            labels: sexRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: sexRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#sexRatio_canvas').remove(); // this is my <canvas> element
				$('#sexRatio_chart').append('<canvas id="sexRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("sexRatio_canvas").getContext("2d");
			    var sexRatioChart = new Chart(a, sexRatio_config);

			    // -------------------------------
		      	//联系方式留存占比

		      	var contactRatio_data = data.contactRatio;

		        var contactRatio_config = {
			        type: "pie",
			        data: {
			            labels: contactRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: contactRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#contactRatio_canvas').remove(); // this is my <canvas> element
				$('#contactRatio_chart').append('<canvas id="contactRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("contactRatio_canvas").getContext("2d");
			    var contactRatioChart = new Chart(a, contactRatio_config);

			    // -------------------------------
		      	//首次到店成交率占比

		      	var firstToOrderRatio_data = data.firstToOrderRatio;

		        var firstToOrderRatio_config = {
			        type: "pie",
			        data: {
			            labels: firstToOrderRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: firstToOrderRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#firstToOrderRatio_canvas').remove(); // this is my <canvas> element
				$('#firstToOrderRatio_chart').append('<canvas id="firstToOrderRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("firstToOrderRatio_canvas").getContext("2d");
			    var firstToOrderRatioChart = new Chart(a, firstToOrderRatio_config);

			    // -------------------------------
		      	//联系方式留存占比

		      	var lastToOrderRatio_data = data.lastToOrderRatio;

		        var lastToOrderRatio_config = {
			        type: "pie",
			        data: {
			            labels: lastToOrderRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f"],
			                borderColor: ["#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: lastToOrderRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#lastToOrderRatio_canvas').remove(); // this is my <canvas> element
				$('#lastToOrderRatio_chart').append('<canvas id="lastToOrderRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("lastToOrderRatio_canvas").getContext("2d");
			    var lastToOrderRatioChart = new Chart(a, lastToOrderRatio_config);

			    // -------------------------------
		      	//竞品占比

		      	var competitorRatio_data = data.competitorRatio;

		        var competitorRatio_config = {
			        type: "pie",
			        data: {
			            labels: competitorRatio_data.label,
			            datasets: [{
			                label: "Label",
			                backgroundColor: ["#08a6c3", "#5cb85c", "#d9534f","#2d304b","#cc0000","#ff9900","#009900"],
			                borderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                hoverBorderColor: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff", "#fff"],
			                borderWidth: 2,
			                data: competitorRatio_data.data
			            }]
			        },
			        options: {
			        	//图例
			            legend: {
			                display: true,
			                position: "top",
			                labels: {
			                    fontColor: "#2e3451",
			                    usePointStyle: true,
			                    fontSize: 13
			                }
			            },
			            //数据标签
			            tooltips: {
			                backgroundColor: "rgba(47, 49, 66, 0.8)",
			                titleFontSize: 13,
			                titleFontColor: "#fff",
			                caretSize: 0,
			                cornerRadius: 4,
			                xPadding: 10,
			                displayColors: true,
			                yPadding: 10
			            }
			        }
			    };

			    $('#competitorRatio_canvas').remove(); // this is my <canvas> element
				$('#competitorRatio_chart').append('<canvas id="competitorRatio_canvas" height="350"></canvas>');

			    var a = document.getElementById("competitorRatio_canvas").getContext("2d");
			    var competitorRatioChart = new Chart(a, competitorRatio_config);
			},
		    error: function(data) {
		      console.log(data);
		    }
		});
	}

	$(document).ready(function(){
		drawChart();
	})
</script>
{/block}

//页面名称
{block name="PageName"}
展厅客流概览
{/block}

//主页面
{block name="main"}
<div class="row flex-row">
	<div class="col-xl-3">
		<div class="widget widget-09 has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>查询日期范围</h4>
            </div>
            <div class="widget-body">
            	<div class="form-group row">
            		<div class="col">
	                    <label class="form-control-label">日期范围</label>
	                    <input type="text" class="form-control" id="daterange" name="daterange">
	                </div>
                </div>
                <div class="row">
                    <div class="col">
		                <div class="text-right">
		                    <button class="btn btn-gradient-01" onclick="drawChart()">确定</button>
		                </div>
		            </div>
		        </div>
            </div>
        </div>
	</div>
	<div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">展厅总客流</div>
                <div id="visitor_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="events-year" style="color:#aea9c3;font-size:1rem">批次</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">新增到店客流</div>
                <div id="new_visitor_count" style="color:#fff;font-size:8rem;font-weight:600">0</div>
                <div id="events-year" style="color:#aea9c3;font-size:1rem">批次</div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-sm-6">
        <div class="widget-32 widget-image bg-image">
            <div class="overlay"></div>
            <div class="content">
                <div id="events-day" style="color:#e76c90;font-size:1.2rem">展厅客流同比</div>
                <div id="visitorChainRatio_text" style="color:#fff;font-size:4rem;font-weight:600;height: 134px;text-align:center;vertical-align:center;line-height:134px;">0</div>
                <div id="events-year" style="color:#aea9c3;font-size:1rem">%</div>
            </div>
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-12 col-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>展厅总体客流趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="showroom_total_visitor_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="showroom_total_visitor_canvas"></canvas>
                </div>
            </div>
            <!-- End Widget Body -->
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-6 col-sm-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>展厅首次客流趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="showroom_First_visitor_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="showroom_First_visitor_canvas"></canvas>
                </div>
            </div>
            <!-- End Widget Body -->
        </div>
    </div>
    <div class="col-xl-6 col-sm-12">
        <div class="widget widget-07 has-shadow">
            <!-- Begin Widget Header -->
            <div class="widget-header bordered no-actions d-flex align-items-center">
            	<H2>展厅再次客流趋势图</H2>
            </div>
            <!-- End Widget Header -->
            <!-- Begin Widget Body -->
            <div class="widget-body">
               	<div class="chart" id="showroom_Last_visitor_chart" style = "position: relative; height:20vh; width:100%">
	               <canvas id="showroom_Last_visitor_canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-3 col-sm-6">
        <!-- 客流来源占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>客流来源占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="sourcesRatio_chart">
                    <canvas id="sourcesRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 客流来源占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 线索有效率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>信息来源占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="originRatio_chart">
                    <canvas id="originRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 线索有效率 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 接待时长占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>接待时长占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="lengthRatio_chart">
                    <canvas id="lengthRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 接待时长占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 关注车型占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>关注车型占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="vehicleRatio_chart">
                    <canvas id="vehicleRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 关注车型占比 -->
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-3 col-sm-6">
        <!-- 客户性别占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>客户性别占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="sexRatio_chart">
                    <canvas id="sexRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 客户性别占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 联系方式留存占比 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>联系方式留存占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="contactRatio_chart">
                    <canvas id="contactRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 联系方式留存占比 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 首次到店成交率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>首次到店成交率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="firstToOrderRatio_chart">
                    <canvas id="firstToOrderRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 首次到店成交率 -->
    </div>
    <div class="col-xl-3 col-sm-6">
        <!-- 再次到店成交率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>再次到店成交率</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="lastToOrderRatio_chart">
                    <canvas id="lastToOrderRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 再次到店成交率 -->
    </div>
</div>
<div class="row flex-row">
	<div class="col-xl-3 col-sm-12">
        <!-- 再次到店成交率 -->
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>竞品占比</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="competitorRatio_chart">
                    <canvas id="competitorRatio_canvas"></canvas>
                </div>
            </div>
        </div>
        <!-- 再次到店成交率 -->
    </div>
	<div class="col-xl-9 col-sm-12">
        <div class="widget has-shadow">
            <div class="widget-header bordered no-actions d-flex align-items-center">
                <h4>销售顾问接待情况</h4>
            </div>
            <div class="widget-body">
                <div class="chart" id="SalesData_chart" style = "position: relative; height:25vh; width:100%">
                    <canvas id="SalesData_canvas"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

//自定义Modal
{block name="Modal"}
{/block}
